<template>
  <div class="reset-password-container">
    <!-- 顶部返回和标题 -->
    <van-nav-bar
      left-arrow
      title="找回密码"
      @click-left="handleGoBack"
    />
    <!-- 应用标识 -->
    <div class="title-group">
      <van-icon name="gold-coin-o" class="icon" />
      <span class="title">鲨鱼记账</span>
    </div>

    <!-- 重置密码表单 -->
    <van-form @submit="handleResetPassword">
      <van-cell-group inset>
        <!-- 用户名 -->
        <van-field
          autocomplete="current-username"
          v-model="resetForm.username"
          label="用户名"
          placeholder="请输入用户名"
          :rules="[
            { required: true, message: '请输入用户名' },
            { pattern: /^.{2,10}$/, message: '用户名在2到10个字符之间' }
          ]"
        />
        <!-- 新密码 -->
        <van-field
          autocomplete="new-password"
          v-model="resetForm.password"
          type="password"
          label="新密码"
          placeholder="请输入新密码"
          :rules="[
            { required: true, message: '请输入新密码' },
            { pattern: /^[a-zA-Z0-9]{6,}$/, message: '密码至少6位，包含字母和数字' }
          ]"
        />
        <!-- 确认新密码 -->
        <van-field
          autocomplete="new-password"
          v-model="resetForm.confirmPassword"
          type="password"
          label="确认密码"
          placeholder="请再次输入新密码"
          :rules="[
            { required: true, message: '请再次输入新密码' },
            { 
              validator: (val) => val === resetForm.password, 
              message: '两次输入的密码不一致' 
            }
          ]"
        />
      </van-cell-group>

      <!-- 重置密码按钮 -->
      <div class="btn-style">
        <van-button
          round
          block
          color="#ffcc00"
          text-color="#000"
          native-type="submit"
        >
          找回密码
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { showSuccessToast } from 'vant';
// 导入找回密码接口
import { resetAccount } from '@/api';

const resetForm = ref({
  username: '',
  password: '',
  confirmPassword: ''
});
const router = useRouter();

const handleResetPassword = async () => {
  // 1. 表单基础校验（Vant表单已做）
  // 2. 调用找回密码接口
  try {
    // 准备重置密码数据（不包含确认密码字段）
    const resetData = {
      username: resetForm.value.username,
      password: resetForm.value.password
    };
    
    const res = await resetAccount(resetData);
    showSuccessToast({
      message: '密码重置成功',
      duration: 1500,
    });
    
    // 延迟跳转到登录页
    setTimeout(() => {
      router.push({ name: 'login' });
    }, 500);
  } catch (e) {
    showToast('密码重置失败: ' + (e.message || '系统异常'));
  }
};

const handleGoBack = () => {
  router.back(); // 返回上一页
};
</script>

<style lang="scss" scoped>
.reset-password-container {
  min-height: 100vh;
  padding: 10% 16px 0;
  background: linear-gradient(135deg, #fff 0%, #f7f8fa 100%);
  animation: fadeIn 0.5s ease-out;

  // 应用标识样式
  .title-group {
    display: flex;
    align-items: center;
    justify-content: left;
    margin-bottom: 20px;
    margin-left: 28px;
    animation: slideInLeft 0.6s ease-out;

    .icon {
      font-size: 28px;
      color: #000;
      background: linear-gradient(135deg, #FFCC00 0%, #FFD814 100%);
      border-radius: 8px;
      padding: 6px;
      margin-right: 12px;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(255, 204, 0, 0.3);
    }

    .title {
      font-size: 26px;
      font-weight: 500;
      color: #333;
    }
  }

  // 表单区域动画
  :deep(.van-cell-group) {
    animation: slideInUp 0.6s ease-out;
  }

  // 按钮区域样式
  .btn-style {
    margin: 16px;
    animation: slideInUp 0.7s ease-out;

    :deep(.van-button) {
      height: 48px;
      font-size: 16px;
      font-weight: 500;
      box-shadow: 0 4px 12px rgba(255, 204, 0, 0.3);
      transition: all 0.3s;

      &:active {
        transform: scale(0.98);
      }
    }
  }
}

/* 动画定义 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>